<!DOCTYPE html>
<html lang="zh">
<head>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/index.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div class="content">
    <div class="title">
        <div class="name">
            <span class="showspan">张子昂</span>
        </div>
        <div class="intr">
            <span >项目简谈</span>
        </div>
        <div class="intr">
            <span >随笔小记</span>
        </div>
        <div class="intr">
            <span >联系方式</span>
        </div>
    </div>
    <div class="banner">
        <div class="showleft">
            <div class="lefttitle">
                <span >向上看，天空为你敞开</span>
                <span >-热气球飞行家</span>
            </div>
            <div class="leftcontent">
                <span>With ShowTrackr you can track your favorite TV shows automatically, so you never loose track of your TV shows ever again. 🍿</span>
            </div>
            <div class="leftlink">
                <span style="float: left;">项目展示</span>  
                <div>
                    <img src="../src/left.png" alt="">
                </div>
            </div>
            
        </div>  
        <div class="showright">
            <img src="../src/banner.png" alt="">
            
        </div>  
    </div>
    <div class="expr" style="margin: auto; margin-top: 129px;clear: both;border:1px black solid,width: 100%;" >
        <div style="margin:auto;width: 53px;height: 73px;">
            <img src="../src/icon@3x.png" alt="">
        </div>
        <div style="margin:auto;margin-top:24px;width: 293px;height: 37px;text-align: center;font-size:27px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;">
            <span>一个程序猿的个人介绍</span>
        </div>
        <div style="margin:auto;margin-top: 20px;width: 109px;border: 2px solid;box-shadow: 0px 1px 2px#E68C7CFF;"></div>
        <div style="margin:auto;margin-top: 25px;width: 223px;font-size:19px;
        font-family:PingFangSC-Regular,PingFang SC;text-align: center;">
            <span>Personal introduction</span>   
        </div>



        <div style="margin:auto;width: 71%;font-size:19px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;margin-top: 51px;">
            SEE = Seeking Experience & Engineering，意为探索用户体验与工程实践，由蚂蚁金服集团每年举办 1-2 次，包括专业分享、产品展台、Workshop 等内容。SEE = Seeking Experience & Engineering，意为探索用户体验与工程实践，由蚂蚁金服集团每年举办 1-2 次，包括专业分享、产品展台、Workshop 等内容。
        </div>
        <div class="li-jianli">
            SEE = Seeking Experience & Engineering，意为探索用户体验与工程实践，由蚂蚁金服集团每年举办 1-2 次，包括专业分享、产品展台、Workshop 等内容。SEE = Seeking Experience & Engineering，意为探索用户体验与工程实践，由蚂蚁金服集团每年举办 1-2 次，包括专业分享、产品展台、Workshop 等内容。

        </div>
        <div class="li-jianli">
            SEE = Seeking Experience & Engineering，意为探索用户体验与工程实践，由蚂蚁金服集团每年举办 1-2 次，包括专业分享、产品展台、Workshop 等内容。SEE = Seeking Experience & Engineering，意为探索用户体验与工程实践，由蚂蚁金服集团每年举办 1-2 次，包括专业分享、产品展台、Workshop 等内容。

        </div>
        <div class="li-jianli">
            SEE = Seeking Experience & Engineering，意为探索用户体验与工程实践，由蚂蚁金服集团每年举办 1-2 次，包括专业分享、产品展台、Workshop 等内容。SEE = Seeking Experience & Engineering，意为探索用户体验与工程实践，由蚂蚁金服集团每年举办 1-2 次，包括专业分享、产品展台、Workshop 等内容。

        </div>

        <div style="margin:auto;width: 53px;margin-top: 147px; height: 73px;">
            <img src="../src/icon@3x.png" alt="">
        </div>
        <div style="margin:auto;margin-top:24px;width: 293px;height: 37px;text-align: center;font-size:27px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;">
            <span id="showmsg"></span>
        </div>
        <div style="margin:auto;margin-top: 20px;width: 109px;border: 2px solid;box-shadow: 0px 1px 2px#90BAB6FF;"></div>
        <div style="margin:auto;margin-top: 25px;width: 223px;font-size:19px;
        font-family:PingFangSC-Regular,PingFang SC;text-align: center;">
            <span>Personal introduction</span>   
        </div>
    </div>
    <div style="margin:auto;">

        <div class="show-first">
            <div class="level-1-1-block" style="">
                <a href="./yishang.html">
                        <img id="show1"  src="../src/11@3x.png" alt="">
                        <div class="show-msg" >
                            <div class="show-msg-title"> 
                                <span style="">挖掘</span>    
                            </div>
                            <div class="show-msg-line"></div>
                             <div class="show-msg-time"> 
                             2019.02.10 
                            </div>
                        </div>
                </a>
    
    
            </div>
            <div class="level-1-2-block">
                <a href="./yuexiang.html">
                <img id="show2"  src="../src/22@3x.png" alt="">
                <div class="show-msg" >
                    <div class="show-msg-title"> 
                        <span style="">挖掘</span>    
                    </div>
                    <div class="show-msg-line"></div>
                     <div class="show-msg-time"> 
                     2019.02.10 
                    </div>
                </div>
                </a>
    
            </div>
    
            <div class="level-1-3-block">
                <a href="./community.html">
                    <img  id="show3"  src="../src/33@3x.png" alt="">
                    <div class="show-msg" >
                        <div class="show-msg-title"> 
                            <span style="">挖掘</span>    
                        </div>
                        <div class="show-msg-line"></div>
                         <div class="show-msg-time"> 
                         2019.02.10 
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
   
    <div class="show-second">
            <div class="level-2-1-block">
                <a href="./detail.html">
                        <img id="show4"  src="../src/44@3x.png" alt="">
                        <div class="show-msg" >
                            <div class="show-msg-title"> 
                                <span style="">挖掘</span>    
                            </div>
                            <div class="show-msg-line"></div>
                             <div class="show-msg-time"> 
                             2019.02.10 
                            </div>
                        </div>
                </a>

            </div>
            <div class="level-2-2-block">
                <a href="./icon.html">
                        <img id="show5"  src="../src/55@3x.png" alt="">
                        <div class="show-msg" >
                            <div class="show-msg-title"> 
                                <span style="">挖掘</span>    
                            </div>
                            <div class="show-msg-line"></div>
                             <div class="show-msg-time"> 
                             2019.02.10 
                            </div>
                        </div>
                </a>
            </div>
    </div>
  
</div>    

</body>
<script>
    let divTyping = document.getElementById('showmsg')
    let i = 0,
      timer = 0,
      str = '这是程序员的一份简历'
  
    function typing () {

      if (i <= str.length) {
        console.log(i)
        divTyping.innerHTML = str.slice(0, i++) + '_'
        timer = setTimeout(typing, 200)
      }
      else {
        // divTyping.innerHTML = str//结束打字,移除 _ 光标
        clearTimeout(timer)
        rm()
      }
    }
    function rm () {
            if (i >= 0) {
                divTyping.innerHTML = str.slice(0, i--) + '_'
                timer1 = setTimeout(rm, 200)
            }
            else {
                clearTimeout(timer1)
                i += 1
                typing()
            }
    }
    typing()
  </script>
</html>